<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>查看打印食品安全检查表</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody"
           v-loading="loading"
           element-loading-text="数据加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.7)">
        <el-tabs v-model="tabline" type="card" v-if="printType==1">
          <el-tab-pane label="餐饮环节周排查表格" name="1"></el-tab-pane>
          <el-tab-pane label="每周食品安全排查治理报告" name="2"></el-tab-pane>
        </el-tabs>
        <dayPrint v-if="showDayPrint" ref="dayDataDetail"></dayPrint>
        <weekTablePrint v-if="showWeekTablePrint" ref="WeekTablePrint"></weekTablePrint>
        <weekPrint v-if="showWeekPrint" ref="WeekPrint"></weekPrint>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button size="small" plain @click="rechFn()">刷新表格</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {foodCheckDayEdit, foodCheckWeekEdit, schoolFoodWeek, foodCheckWeekBefores} from "@/api/admin/schoolFood"
import {systemIndex} from '@/api/admin/system'
import dayPrint from "./dayPrint";
import weekTablePrint from "./weekTablePrint";
import weekPrint from "./weekPrint";

export default {
  props: ['visible', 'printType', 'detailId'], // printType 1 每周 2 每日
  components: {dayPrint, weekTablePrint, weekPrint},
  data() {
    return {
      dialogVisible: this.visible,
      name: '',
      number: '',
      teacherVisible: false,
      dynamicTags: [],
      dynamicTagsArray: {},
      iframeSrc: '',
      iframeWin: '', // 内嵌页面内容
      schoolName: '',
      treeList: '',
      loading: true,
      tabline: '1',
      showDayPrint: false,
      showWeekTablePrint: false,
      showWeekPrint: false
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        if (Number(this.printType) === 2) {
          this.showDayPrint = true
        }else{
          this.showWeekTablePrint = true
        }
        this.getSystemFn()
      } else {
        this.tabline = '1'
        this.name = ''
        this.number = ''
        this.dynamicTags = []
        this.dynamicTagsArray = {}
        this.loading = true
        this.showDayPrint = false
        this.showWeekTablePrint = false
        this.showWeekPrint = false
      }
    },
    tabline() {
      if (this.visible) {
        this.loading = true
        if (Number(this.tabline) === 1) {
          this.showWeekPrint = false
          this.showWeekTablePrint = true
          this.getWeekListFn()
        } else {
          this.showWeekTablePrint = false
          this.showWeekPrint = true
          this.getWeekListFn()
        }
      }
    }
  },
  created() {
  },
  methods: {
    getSystemFn() {
      systemIndex({}).then(response => {
        this.schoolName = response.vo.name
        if (Number(this.printType) === 1) {
          this.getWeekListFn()
        } else {
          this.getDetail()
        }
      })
    },
    // 每周检查项目
    getWeekListFn() {
      schoolFoodWeek().then(res => {
        this.treeList = this.$handleTree(res.list, 'id', 'parent_id');
        this.getweekDetail()
      })
    },
    getweekDetail() {
      let n = this
      foodCheckWeekEdit({id: this.detailId}).then(res => {
        if (Number(this.tabline) === 1) {
          res.vo.schoolName = this.schoolName
          this.$refs.WeekTablePrint.getData({list: JSON.stringify(this.treeList), data: JSON.stringify(res.vo)})
          setTimeout(() => {
            n.loading = false
          }, 1000)
        } else {
          // 上周数据
          this.getFoodCheckWeekBeforesFn(res.vo)
        }
      })
    },
    getFoodCheckWeekBeforesFn(thisWeek) {
      let n = this
      foodCheckWeekBefores().then(res => {
        console.log('s上周数据:', res)
        this.$refs.WeekPrint.getData({
          list: JSON.stringify(this.treeList),
          thisweek: thisWeek ? JSON.stringify(thisWeek) : '',
          befores: res.list ? JSON.stringify(res.list) : '',
          schoolName: n.schoolName
        })
        // 每日检查内容给你
        // this.iframeWin.postMessage({
        //   method: '每周检查内容',
        //   data: {
        //     list: JSON.stringify(this.treeList),
        //     thisweek: thisWeek ? JSON.stringify(thisWeek) : '',
        //     url: '/',
        //     befores: res.list ? JSON.stringify(res.list) : '',
        //     schoolName: n.schoolName
        //   },
        //   type: 'detail'
        // }, '*')
        setTimeout(() => {
          n.loading = false
        }, 1000)
      })
    },
    getDetail() {
      let n = this
      foodCheckDayEdit({id: this.detailId}).then(res => {
        res.vo.schoolName = this.schoolName
        // 每日检查内容给你
        this.$refs.dayDataDetail.getData(JSON.stringify(res.vo))
        setTimeout(() => {
          n.loading = false
        }, 1000)
      })
    },
    rechFn() {
      if (Number(this.printType) === 2) {
        this.getDetail()
      }else{
        this.getWeekListFn()
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 1100px;
  height: 90%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 5px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.close-Btn-line {
  cursor: pointer;
}

.iframeShow {
  /*height: 100%;*/
  width: 100%;
  flex: 1;
}
</style>


